@extends('admin.layouts.app')

@section('right-content')
{{-- 头部汇总 --}}
<style type="text/css">
    .layui-table th,td {
        text-align: center;
    }
    .custom-header {
        background-color: #068d82;
        height: 30px;
        line-height: 30px;
        color: #fff;
        margin: 10px auto;
        padding: 0 10px;
    }
    .custom-header span {
        font-size: 1.2em;
    }
    .layui-form {
        float: right;
        width:30%;
    }
    .custom-select {
        width: 20%;
    }
    .custom-input-date {
        width:78%;
    }
    .custom-module .custom-title .layui-btn-group .custom-active {
        /*background-color: #009688;
        color: #fff;*/
    }
    .custom-module .detail {
        text-align: right;
    }
    h4 {
        font-size: 1.3em;
        padding: 10px;
    }
    .custom-summary .layui-table td span {
        font-size: 16px;
    }
</style>
<section class="custom-summary">
    <table class="layui-table">
        <tbody>
            <tr>
                <td><h4>总用户数量</h4><span>{{ $gamer_num }}</span></td>
                {{-- <td><h4>MAU</h4><span>{{ $month_active_num }}</span></td> --}}
                <td><h4>累计付费用户</h4><span>{{ $recharge_gamer_num }}</span></td>
                <td><h4>付费率</h4><span>{{ $recharge_rate }}</span></td>
                <td><h4>ARPU</h4><span>{{ $arpu }}</span></td>
            </tr>
            <tr>
                <td><h4>有效用户数</h4><span>{{ $active_gamer_num }}</span></td>
                {{-- <td><h4>用户平均在线时长</h4><span>12345</span></td> --}}
                <td><h4>累计付费金额</h4><span>{{ $recharge_amount }}</span></td>
                <td><h4>30日LTV</h4><span>{{ $ltv30 }}</span></td>
                <td><h4>ARPPU</h4><span>{{ $arppu }}</span></td>
            </tr>
        </tbody>
    </table>
</section>

<div class="custom-header">
    <span>整体趋势</span>
</div>

{{-- 整体趋势图表 --}}
<section class="custom-module">
    <div class="custom-title">
        <div class="layui-btn-group" id="group1">
            <button class="layui-btn layui-btn-small active" data-type="add">新增用户</button>
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="active">活跃用户</button>
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="valid_active">有效活跃用户</button>
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="sum">当日玩牌局数</button>
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="average">当日玩牌平均数</button>
            {{-- <button class="layui-btn layui-btn-small layui-btn-primary" data-type="median">当日玩牌中位数</button> --}}
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="arpu">ARPU</button>
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="arppu">ARPPU</button>
        </div>
        <form class="layui-form" id="form1">
            <div class="layui-input-inline custom-select">
                <select name="main-date1" lay-filter="main-date1">
                    <option value="day">按日</option>
                    <option value="month">按月</option>
                </select>
            </div>

            <div class="layui-input-inline custom-input-date"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" name="test1" id="test1">
            </div>
        </form>
    </div>
    {{-- 图表 --}}
    {{-- {!! $polyline !!} --}}
    <div id="main-summary" style="width:100%; height:400px;"></div>
    <div class="detail"><button class="layui-btn layui-btn-small detail1">查看详情</button></div>
    <table class="layui-table" id="table1">
        <thead>
            <tr>
                <th>渠道名称</th>
                <th>新增用户</th>
                <th>活跃用户</th>
                <th>有效活跃用户</th>
                <th>当日玩牌局数</th>
                <th>当日玩牌平均数</th>
                {{-- <th>当日玩牌中位数</th> --}}
            </tr>
        </thead>
        <tbody>
            @foreach ($channels as $val)
                <tr>
                    <td>{{ $val['name'] }}</td>
                    <td>{{ $val['new'] }}</td>
                    <td>{{ $val['active'] }}</td>
                    <td>{{ $val['valid_active'] }}</td>
                    <td>{{ $val['sum'] }}</td>
                    <td>{{ $val['average'] }}</td>
                    {{-- <td>{{ $val['median'] }}</td> --}}
                </tr>
            @endforeach
        </tbody>
    </table>
</section>

<div class="custom-header"><span>留存&amp;付费</span></div>

<div>
    <table class="layui-table">
        <tbody>
            <tr>
                <td>总新增用户数: <span>1234</span></td>
                <td>当月新增用户总数: <span>1234</span></td>
                <td>当月用户增长率: <span>1234</span></td>
                <td>用户流失率: <span>1234</span></td>
            </tr>
            <tr>
                <td>今日活跃用户流失数: <span>1234</span></td>
                <td>今日用户流失数: <span>1234</span></td>
                <td>当月活跃用户流失数: <span>1234</span></td>
                <td>当月用户流失数: <span>1234</span></td>
            </tr>
        </tbody>
    </table>
</div>

<section class="custom-module">
    <div class="custom-title">
        <div class="layui-btn-group" id="group2">
            <button class="layui-btn layui-btn-small active">次日留存率</button>
            <button class="layui-btn layui-btn-small layui-btn-primary">7日留存率</button>
            <button class="layui-btn layui-btn-small layui-btn-primary">30日留存率</button>
            <button class="layui-btn layui-btn-small layui-btn-primary">180日留存率</button>
            <button class="layui-btn layui-btn-small layui-btn-primary">付费全额</button>
            <button class="layui-btn layui-btn-small layui-btn-primary">新增付费用户</button>
            <button class="layui-btn layui-btn-small layui-btn-primary">付费率</button>
        </div>
        <form class="layui-form" id="form2">
            <div class="layui-input-inline custom-select">
                <select name="main-date2" lay-filter="main-date2">
                    <option value="date">按日</option>
                    <option value="month">按月</option>
                </select>
            </div>

            <div class="layui-input-inline custom-input-date"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="test2">
            </div>
        </form>
    </div>
    {{-- 图表 --}}
    <div id="main-pay" style="width:100%;height:400px"></div>
    <div class="detail "><button class="layui-btn layui-btn-small detail2">查看详情</button></div>
    <table class="layui-table" id="table2">
        <thead>
            <tr>
                <th>渠道名称</th>
                <th>新增用户</th>
                <th>活跃用户</th>
                <th>有效活跃用户</th>
                <th>当日玩牌局数</th>
                <th>当日玩牌平均数</th>
                <th>当日玩牌中位数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>IOS</td>
                <td>25</td>
                <td>15</td>
                <td>5</td>
                <td>500</td>
                <td>54</td>
                <td>65</td>
            </tr>
            <tr>
                <td>应用宝</td>
                <td>25</td>
                <td>15</td>
                <td>5</td>
                <td>500</td>
                <td>54</td>
                <td>65</td>
            </tr>
        </tbody>
    </table>
</section>

@endsection

@section('my-js')
<script type="text/javascript" src="{{ asset('/admin/frame/echarts/echarts.js') }}"></script>
<script>
    layui.use(['form','element','layer','laydate'], function(){
        var $ = layui.jquery, element = layui.element, layer = layui.layer, form = layui.form, laydate = layui.laydate;

        //时间选择器
        var mainDateIndex1 = laydate.render({
            elem: '#test1',
            type: 'datetime',
            range: '~',
            format: 'yyyy-MM-dd HH:mm:ss',
            done: function (value, date, endDate) {
                //ajax请求
                var type = $('#group1 .active').attr('data-type');
                var kind = $('select[name="main-date1"]').val();

                var data = {type : type, kind : kind, date : value};
                ajaxRequest(data);
            }
        });
        var mainDateIndex2 = laydate.render({
            elem: '#test2',
            type: 'datetime',
            range: '~',
            format: 'yyyy-MM-dd HH:mm:ss',
        });

        form.on('select(main-date1)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            $('#test1').remove();
            $('#form1 .custom-input-date').html('<input type="text" class="layui-input" id="test1">');
            if (data.value == 'month') {
                setTime('#test1', 'month', 'yyyy-MM');
            } else {
                setTime('#test1', 'datetime', 'yyyy-MM-dd HH:mm:ss');
            }

        });
        function setTime(id, type, format) {
            laydate.render({
                elem: id,
                type: type,
                range: '~',
                format: format,
                done: function (value, date, endDate) {
                    //ajax请求
                    console.log(value);
                    var data_type = $('#group1 .active').attr('data-type');
                    if (type == 'datetime') type = 'day';
                    data = {type : data_type, kind : type, date : value};
                    ajaxRequest(data);
                }
            });
        };
        form.on('select(main-date2)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });


        $('#group1 button').on('click', function(){
            if ($(this).hasClass('active')) {
                return false;
            }

            $(this).removeClass('layui-btn-primary').addClass('active').attr('disabled',true);
            $(this).siblings().addClass('layui-btn-primary').removeClass('active').attr('disabled', false);

            var type = $(this).attr('data-type');

            //ajax请求
            data = {type : type, kind : 'today'};
            ajaxRequest(data);
        });


        function ajaxRequest(data) {
            $.get('{{ route("admin.chart.chartData") }}',data, function(data){
                console.log(data);
                if (data.status == 0) {
                    polylineOption.title.text = data.chart.title;
                    polylineOption.legend.data = data.chart.legend;
                    polylineOption.xAxis.data = data.chart.xAxis;
                    polylineOption.series = data.chart.series;

                    mainSummary.setOption(polylineOption);

                    var channels = data.channels_summary;
                    var html = '';
                    $.each(channels, function(i, value) {
                        html += '<tr><td>'+value.name+'</td><td>'+value.new+'</td><td>'+value.active+'</td><td>'+value.valid_active+'</td><td>'+value.sum+'</td><td>'+value.average+'</td></tr>';
                    });

                    $('#table1 tbody').html(html);

                } else {
                    layer.msg(data.msg);
                }
            },'json');
        }

        $('.detail1').on('click', function() {
            $('#table1').toggle();
        });
        $('.detail2').on('click', function() {
            $('#table2').toggle();
        });


        // 基于准备好的dom，初始化echarts实例
        var chart = JSON.parse('{!! $chart !!}');
        console.log(chart);
        var mainSummary = echarts.init(document.getElementById('main-summary'));
        var polylineOption = {
            title: {
                text: chart.title
            },
            tooltip: {
                trigger: 'axis',
                show: true,
            },
            legend: {
                data: chart.legend //不显示
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                },
                right: '2%'
            },
            dataZoom: [ //缩放区
                 {
                type: 'slider',
                show: true,
                xAxisIndex: 0,
                start: 0,
                end: 100,
                handleSize: 8,
                bottom: '5%'
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
            ],
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: chart.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series:
                // {
                //     name: chart.legend,
                //     type:'line',
                //     stack: '总量',
                //     data: chart.series
                // }
                chart.series

        };
        // 使用刚指定的配置项和数据显示图表。
        mainSummary.setOption(polylineOption);


        // 基于准备好的dom，初始化echarts实例
        var mainPay = echarts.init(document.getElementById('main-pay'));

        var histogramOption = {
            title: {
                text: '折柱混合'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['蒸发量','降水量','平均温度']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '水量',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 25,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'降水量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                    name:'平均温度',
                    type:'line',
                    yAxisIndex: 1,
                    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        mainPay.setOption(histogramOption);


    });
</script>
@endsection